<template>
    <div class="rankstu">
        <div class="title"></div>
        <div class="header">
            <div class="index">排名</div>
            <div class="class">班级</div>
            <div class="score">积分</div>
        </div>
        <div class="contentbox">
            <div class="itembody">
                <div class="item clearfix" :class="index%2==0?'item2':''" v-for="(item,index) in stuList" :key="index">
                    <div class="index">
                        <div v-if="index<3" :class="[{'first':index==0},{'second':index==1},{'third':index==2}]"></div>
                        <div class="circle" v-if="index>2">
                            <div class="num">{{index+1}}</div>
                        </div>
                    </div>
                    <div class="class">{{item.class}}</div>
                    <div class="score">{{item.score}}</div>
                </div>
            </div>
        </div>
        <div class="bot"></div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            stuList:[
                {name:"林天音",class:"三年级（12）班",avatar:'http://assets.91118.com/img/Person_center/main/head/v2/teacher.png',score:56888},
                {name:"林天音",class:"三年级（12）班",avatar:'http://assets.91118.com/img/Person_center/main/head/v2/teacher.png',score:56888},
                {name:"林天音",class:"三年级（12）班",avatar:'http://assets.91118.com/img/Person_center/main/head/v2/teacher.png',score:56888},
                {name:"林天音",class:"三年级（12）班",avatar:'http://assets.91118.com/img/Person_center/main/head/v2/teacher.png',score:56888},
                {name:"林天音",class:"三年级（12）班",avatar:'http://assets.91118.com/img/Person_center/main/head/v2/teacher.png',score:56888},
                {name:"林天音",class:"三年级（12）班",avatar:'http://assets.91118.com/img/Person_center/main/head/v2/teacher.png',score:56888},
                {name:"林天音",class:"三年级（12）班",avatar:'http://assets.91118.com/img/Person_center/main/head/v2/teacher.png',score:56888},
                {name:"林天音",class:"三年级（12）班",avatar:'http://assets.91118.com/img/Person_center/main/head/v2/teacher.png',score:56888},
                {name:"林天音",class:"三年级（12）班",avatar:'http://assets.91118.com/img/Person_center/main/head/v2/teacher.png',score:56888},
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.rankstu{
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/bigscreen/bg1334.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
    .title{
        width: 3.04rem;
        height: .6rem;
        position: absolute;
        top: 1.1rem;
        left: 5.36rem;
        background: url(~@/assets/img/bigscreen/classtitle.png) no-repeat;
        background-size: 100% 100%;
    }
    .header{
        position: absolute;
        top: 2.34rem;
        left: 1.34rem;
        width: 10.66rem;
        height: .4rem;
        font-size: .4rem;
        line-height: .4rem;
        font-weight: bold;
        >div{
            display: inline-block;
        }
        .index{
            margin-left: .96rem
        }
        .class{
            margin-left: 2.39rem;
        }
        .score{
            margin-left: 3.2rem;
        }
    }
    .contentbox{
        position: absolute;
        top: 3.02rem;
        left: 1.34rem;
        width: 10.66rem;
        height: 9.1rem;
        overflow-y: scroll;
        &::-webkit-scrollbar{
            display: none;
        }
        .itembody{
            width: 100%;
            height: auto;
            .item{
                position: relative;
                width: 100%;
                height: 1.3rem;
                font-size: .38rem;
                line-height: 1.3rem;
                color: #333333;
                &.item2{
                    background: #fcf7eb;
                }
                .index{
                    margin-left: .95rem;
                    width: .8rem;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    float: left;
                    .first{
                        width: .52rem;
                        height: .63rem;
                        background: url(~@/assets/img/preliminary/number1.png) no-repeat center;
                        background-size: 100% 100%;
                    }
                    .second{
                        width: .52rem;
                        height: .63rem;
                        background: url(~@/assets/img/preliminary/number2.png) no-repeat center;
                        background-size: 100% 100%;
                    }
                    .third{
                        width: .52rem;
                        height: .63rem;
                        background: url(~@/assets/img/preliminary/number3.png) no-repeat center;
                        background-size: 100% 100%;
                    }
                    .circle{
                        background: #ffe566;
                        color: #ca5900;
                        height: .56rem;
                        border-radius: .28rem .28rem;
                        width: auto;
                        min-width: .56rem;
                        text-align: center;
                        .num{
                            font-size: .36rem;
                            padding: 0 .1rem;
                            line-height: .56rem;
                        }
                    }
                }
                .class{
                    margin-left: 1.5rem;
                    width: 4.8rem;
                    height: 100%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    float: left;
                }
                .score{
                    margin-left: .2rem;
                    width: 2rem;
                    height: 100%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    float: left;
                }
            }
        }
    }
    .bot{
        width: 100%;
        height: 1.86rem;
        position: absolute;
        bottom: 0;
        left: 0;
        background: url(~@/assets/img/bigscreen/botbg11.png) no-repeat;
        background-size: 100%;
    }
}
</style>
